import Banner from '@/components/banner'
	import sectionTitle from '@/components/section-title'
	import comment from '@/components/comment'
	import menuTree from '@/components/menu-tree'
	import jQuery from "jquery"
	import {
		fetchComment
	} from '@/api'
	import {
		queryArticle
	} from '@/api/blog.js'
	import htmlPanel from '@/components/html_panel'
	import {
		publishComment
	} from '@/api/comments.js'
	import {
		queryPreAndNext,
		queryBrother
	} from "@/api/article.js"
	import messageEditor from "@/components/messageEditor.vue"
	export default {
		name: 'Article',
		data() {
			return {
				showDonate: false,
				comments: [],
				menus: [],
				article: {},
				comments_total: 0,
				pageSize: 10,
				path: '',
				userInfo: {
					userImage: '',
					userName: '',
					id: 1,
					userImageHost: ""
				},
				preAndNext: {
					pre: {},
					next: {}
				},
				brothers: []
				//userInfo2: this.$user.getUserInfo(),
			}
		},
		computed: {
			userInfo2() {
				return this.$store.state.userInfo
			}
		},
		components: {
			Banner,
			sectionTitle,
			comment,
			menuTree,
			"html-panel": htmlPanel,
			messageEditor
		},
		methods: {
			handleSizeChange(val) {
				this.getComment(val)
			},
			getComment(pageNo) {
				fetchComment(pageNo, this.pageSize, this.$route.params.id).then(res => {
					this.comments = res.data.data || []
					this.comments_total = res.data.total;
					console.log(this.comments)
				}).catch(err => {
					console.log(err)
				})
			},
			fetchH(arr, left, right) {
				if (right) {
					return arr.filter(item => item.offsetTop > left && item.offsetTop < right)
				} else {
					return arr.filter(item => item.offsetTop > left)
				}
			},
			// 生成目录
			createMenus() {
				let arr = []
				for (let i = 6; i > 0; i--) {
					let temp = []
					let e = document.querySelector(".entry-content").querySelectorAll(`h${i}`)
					for (let j = 0; j < e.length; j++) {
						let child = this.fetchH(arr, e[j].offsetTop, (j + 1 === e.length) ? undefined : e[j + 1].offsetTop)
						temp.push({
							h: i,
							title: e[j].innerText,
							id: e[j].id,
							offsetTop: e[j].offsetTop,
							child
						})
					}
					if (temp.length) {
						arr = temp
					}
				}
				this.menus = arr
			},
			//发表评论
			submitPublishComment(val) {
				var data = val;
					data.articleId=this.article.id,
					data.articleTitle=this.article.title,
					data.type=0
				publishComment(data).then(res => {
					this.getComment(1)
					//jQuery(".publishComment .content").html('').attr("value", "");
					//jQuery(".publishComment .input-box").attr("value", "");
					this.$message({
						message: '发表成功',
						type: 'success'
					});
				})
			},
			//根据id查询上一篇下一篇
			getPreAndNext(id) {
				queryPreAndNext(id).then(res => {
					this.preAndNext = res.data;
				})
			},
			queryBrother(id) {
				queryBrother(id).then(res => {
					this.brothers = res.data;
				})
			}
		},
		mounted() {
			this.path = this.$route.path;
			var data = {
				id: this.$route.params.id
			}
			queryArticle(data).then(res => {
				this.article = res.data;
				var _this = this;
				var a = setInterval(function() {
					_this.createMenus()
					if (_this.menus.length > 0) {
						clearInterval(a);
					}
				}, 1);
				jQuery(".entry-content img").attr("class", "img_hover");
				jQuery(".entry-content").on("click", 'img', function() {
					var _this = jQuery(this);
					if (_this.hasClass("big")) {
						_this.attr("class", "img_hover");
					} else {
						_this.attr("class", "big");
					}
				});
			})
			this.getPreAndNext(this.$route.params.id)
			this.queryBrother(this.$route.params.id);

		},
		created() {
			this.getComment(1)

		},
		//页面创建之初自动触发的事件
		beforeCreate() {
			this.$bus.emit("setIdx", 1);
		},
		beforeUpdate() {}
	}